<template>
  <el-menu
    :style="{width:250+'px'}"
    :router="true"
    default-active="2"
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose">

    <!-- 遍历一级菜单 -->
    <div v-for="(items ,index) in menuList">

      <!-- 有二级菜单 el-submenu -->
      <el-submenu :index="items.t.menuId" v-show="items.size >= 1">
        <template slot="title">
          <i class="iconfont" style="font-size: 25px;" v-html="items.t.menuIcon"></i>
          <span>{{items.t.menuName}}</span>
        </template>

        <!-- 遍历二级菜单 -->
        <div v-for="(item,index1) in items.children">
          <el-submenu :index="index+'-'+index1" v-show="item.size >= 1">
            <template slot="title">{{item.t.menuName}}</template>
            <!-- 遍历三级菜单 -->
            <el-menu-item index="1-4-1" v-for="children in item.children">{{children.t.menuName}}</el-menu-item>
          </el-submenu>


          <el-menu-item :index="index+'-'+index1" v-show="!(item.size >= 1)">
            <span slot="title">{{item.t.menuName}}</span>
          </el-menu-item>
        </div>
      </el-submenu>

      <!-- 没有二级菜单 el-menu-item -->
      <el-menu-item :index="items.t.menuUrl" v-show="!(items.size >= 1)">
        <i class="iconfont" v-html="items.t.menuIcon" style="font-size: 25px;"></i>
        <span slot="title">{{items.t.menuName}}</span>
      </el-menu-item>
    </div>


  </el-menu>
</template>

<script>
  import MenuApi from '@/api/menuApi'
  export default {
    data(){
      return{
        menuList:[]
      }
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    },
    created() {
      MenuApi.menuList().then(res => {
        this.menuList = res.data.data.children[3].children
        console.log(this.menuList)
      })
    }
  }
</script>

<style>
</style>
